<template>
  <div class="calculate-preview-content">
    <div class="preview-wrapper">
      <template v-for="(item, index) in dataLabs">
        <span
          :key="index"
          class="preview-item"
          :class="{ 'tag-item': item.type_id == '1', 'logic-item': item.type_id == '0' }"
          v-if="item.type_id == '0' || item.type_id == '1'"
        >
          {{ item.type_id == '1' ? item.tag_nm : item.showOperator || item.symbol }}
        </span>
        <span v-else :key="index" class="preview-item func-item">
          {{ item.func_param.func_name }} (
          <span v-for="(func, funcIndex) in item.func_param.param" :key="funcIndex">
            <span :class="{ 'tag-item': func.type_id == '1' }">
              {{
                func.type_id == '1'
                  ? func.param.tag_nm || '标签'
                  : func.type_id == '2'
                  ? func.param.constant || '数值'
                  : `"${func.param.show_company || '单位'}"`
              }}
            </span>
            {{ funcIndex &lt; item.func_param.param.length - 1 ? '，' : '' }}
          </span>
          )
        </span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataLabs: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.calculate-preview-content {
  height: 200px;
  position: relative;
}
.preview-wrapper {
  width: 100%;
  font-size: 16px;
  margin-top: -16px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  span {
    padding: 5px;
    margin: 0 2px;
  }
  .preview-item {
    display: inline-block;
    margin-top: 10px;
  }
  .tag-item {
    font-weight: normal;
    color: #666;
    background-color: #e6eeff;
  }
  .logic-item {
    font-weight: bold;
    color: #ff9c6c;
  }
  .func-item {
    font-weight: bold;
    color: #4d81ea;
  }
}
</style>
